Pagination হলো এমন একটি কৌশল যা একাধিক পেজে ডেটা ভাগ করে প্রদর্শন করতে সহায়তা করে। Ajax ব্যবহার করে পেজ নম্বর পরিবর্তন না করে ডেটা লোড করা সম্ভব হয়, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত এবং দ্রুত করে তোলে। এই টিউটোরিয়ালে আমরা Ajax এর মাধ্যমে Pagination তৈরি করার প্রক্রিয়া শিখব।
Pagination এমন একটি প্রক্রিয়া যেখানে খুব বড় ডেটা বা লিস্টকে ছোট ছোট অংশে ভাগ করা হয় এবং এগুলিকে পেজের মাধ্যমে প্রদর্শন করা হয়। উদাহরণস্বরূপ, ১০০টি ডেটা ১০টি করে ভাগ করে ১০টি পেজে দেখানো হয়। এর মাধ্যমে ইউজারের জন্য সহজ এবং দ্রুত ডেটা ভিউ পাওয়া যায়।
প্রথমে একটি পেজ তৈরির ফর্ম তৈরি করুন, যেখানে ডেটা এবং পেজিনেশন সংক্রান্ত তথ্য দেখানো হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination with Ajax</title>
</head>
<body>
<h1>Pagination Example</h1>
<div id="dataContainer"></div>
<div id="pagination"></div>
<script src="script.js"></script>
</body>
</html>
এখন, একটি script.js ফাইল তৈরি করুন যা পেজ নম্বর অনুযায়ী ডেটা লোড করবে এবং পেজিনেশন উপাদান তৈরি করবে।
script.js:
let currentPage = 1; // প্রাথমিক পেজ
const recordsPerPage = 5; // প্রতি পেজে কত রেকর্ড দেখানো হবে
function loadData(page) {
const xhr = new XMLHttpRequest();
xhr.open("GET", `fetch_data.php?page=${page}&records_per_page=${recordsPerPage}`, true);
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
displayData(data.records);
displayPagination(data.totalPages, page);
}
};
xhr.send();
}
function displayData(records) {
const dataContainer = document.getElementById("dataContainer");
dataContainer.innerHTML = "";
records.forEach(record => {
dataContainer.innerHTML += `<p>${record.name} - ${record.email}</p>`;
});
}
function displayPagination(totalPages, currentPage) {
const paginationContainer = document.getElementById("pagination");
paginationContainer.innerHTML = "";
for (let i = 1; i <= totalPages; i++) {
paginationContainer.innerHTML += `<button onclick="loadData(${i})">${i}</button>`;
}
}
// প্রথমে ডেটা লোড করা
loadData(currentPage);
এখন PHP ফাইল তৈরি করুন যা ডেটাবেস থেকে ডেটা রিট্রাইভ করবে এবং পেজিনেশন যুক্ত করে ক্লায়েন্টকে রেসপন্স পাঠাবে।
fetch_data.php:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$recordsPerPage = isset($_GET['records_per_page']) ? (int)$_GET['records_per_page'] : 5;
$offset = ($page - 1) * $recordsPerPage;
// ডেটা রিট্রাইভ করা
$sql = "SELECT name, email FROM users LIMIT $offset, $recordsPerPage";
$result = $conn->query($sql);
// মোট রেকর্ডের সংখ্যা
$totalResult = $conn->query("SELECT COUNT(*) AS total FROM users");
$totalRow = $totalResult->fetch_assoc();
$totalRecords = $totalRow['total'];
$totalPages = ceil($totalRecords / $recordsPerPage);
$records = [];
while ($row = $result->fetch_assoc()) {
$records[] = $row;
}
$response = [
'records' => $records,
'totalPages' => $totalPages
];
echo json_encode($response);
$conn->close();
?>
loadData(page) ফাংশনটি কল করা হয়, যা পেজ নম্বর অনুযায়ী PHP ফাইল থেকে ডেটা ফেচ করবে।displayPagination ফাংশনটি পেজ নম্বরগুলো ক্লিকযোগ্য বাটন আকারে তৈরি করবে।এখানে একটি সাধারণ ডেটাবেস স্ট্রাকচার বিবেচনা করা হয়েছে:
CREATE DATABASE test_db;
USE test_db;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
email VARCHAR(100)
);
INSERT INTO users (name, email) VALUES
('John Doe', 'john.doe@example.com'),
('Jane Smith', 'jane.smith@example.com'),
('Michael Brown', 'michael.brown@example.com'),
('Emily Johnson', 'emily.johnson@example.com'),
('Chris Lee', 'chris.lee@example.com'),
('Katie Davis', 'katie.davis@example.com'),
('David Wilson', 'david.wilson@example.com'),
('Sarah Clark', 'sarah.clark@example.com'),
('James Hall', 'james.hall@example.com'),
('Linda Moore', 'linda.moore@example.com');
Ajax এর মাধ্যমে Pagination তৈরি করা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং পেজ রিফ্রেশ ছাড়াই ডেটা লোড করা সম্ভব হয়। এটি ডেটাবেস থেকে ডেটা লোড করার ক্ষেত্রে দ্রুত এবং ইন্টারঅ্যাকটিভ উপায়। এখানে প্রদত্ত কোডের মাধ্যমে আপনি সহজে ডেটা পেজিনেশন বাস্তবায়ন করতে পারবেন এবং আপনার অ্যাপ্লিকেশনে উন্নত ইউজার ইন্টারফেস যোগ করতে পারবেন।
Ajax ব্যবহার করে Dynamic Pagination তৈরি করা একটি আধুনিক পদ্ধতি, যা বড় ডাটাসেটকে পেজে ডায়নামিক্যালি লোড করে দেখায়। এই পদ্ধতিতে, Ajax রিকোয়েস্টের মাধ্যমে ডাটাবেস থেকে ডেটা ফেচ করা হয় এবং ব্যবহারকারী যখন পেজ নেভিগেট করে, তখন নতুন ডেটা লোড হয় পেজ রিফ্রেশ ছাড়াই। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে এবং ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ করে তোলে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Pagination Example</title>
<style>
/* Pagination স্টাইল */
.pagination {
margin-top: 20px;
}
.pagination button {
margin: 2px;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>Employee List</h1>
<table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
</tbody>
</table>
<div class="pagination" id="pagination">
<!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
</div>
<script>
// বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
let currentPage = 1;
const rowsPerPage = 5;
// পেজ লোড হলে ডেটা লোড করা
document.addEventListener('DOMContentLoaded', function() {
fetchData(currentPage);
});
// Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
function fetchData(page) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
renderTable(response.data);
renderPagination(response.totalPages, page);
}
};
xhr.send();
}
// টেবিল রেন্ডার করার ফাংশন
function renderTable(data) {
var tbody = document.querySelector("#employee-table tbody");
tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা
data.forEach(function(employee) {
var row = document.createElement("tr");
row.innerHTML = `<td>${employee.name}</td>
<td>${employee.email}</td>
<td>${employee.department}</td>`;
tbody.appendChild(row);
});
}
// পেজিনেশন রেন্ডার করার ফাংশন
function renderPagination(totalPages, currentPage) {
var pagination = document.getElementById('pagination');
pagination.innerHTML = "";
for (let i = 1; i <= totalPages; i++) {
var button = document.createElement("button");
button.textContent = i;
if (i === currentPage) {
button.disabled = true;
}
button.onclick = function() {
fetchData(i);
};
pagination.appendChild(button);
}
}
</script>
</body>
</html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";
$conn = new mysqli($servername, $username, $password, $dbname);
// কানেকশন চেক করা
if ($conn->connect_error) {
http_response_code(500);
echo json_encode(["error" => "Database connection failed."]);
exit();
}
// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 5;
$offset = ($page - 1) * $rowsPerPage;
// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);
// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();
// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
"data" => $employees,
"totalPages" => $totalPages
]);
$stmt->close();
$conn->close();
?>
ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:
CREATE TABLE employees (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
department VARCHAR(100) NOT NULL
);
fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।fetchData() রিকোয়েস্ট পাঠানোর সময় বর্তমান পেজ নম্বর এবং প্রতি পেজে কতটি রেকর্ড (rows) দেখাতে হবে সেটি প্যারামিটার হিসেবে পাঠায়।renderTable() এবং renderPagination() ফাংশন কল হয়।renderTable() ফাংশন Ajax থেকে প্রাপ্ত ডেটা ব্যবহার করে টেবিল আপডেট করে।renderPagination() ফাংশন টোটাল পেজ সংখ্যা এবং বর্তমান পেজ অনুযায়ী পেজিনেশন বাটন তৈরি করে।Ajax ব্যবহার করে Large Data Set এর জন্য Pagination Handling করা একটি গুরুত্বপূর্ণ পদ্ধতি, বিশেষ করে যখন আপনার ডাটাবেসে অনেক ডেটা থাকে এবং আপনি ইউজার ইন্টারফেসে এটি ডায়নামিক্যালি এবং দ্রুত লোড করতে চান। Ajax এর মাধ্যমে Pagination পরিচালনা করার সময়, প্রতিবার নতুন পেজে ক্লিক করলে নতুন ডেটা লোড করা হয়, যা পেজ রিফ্রেশ ছাড়াই ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Large Data Set Pagination Example</title>
<style>
/* Pagination styling */
.pagination {
margin-top: 20px;
}
.pagination button {
margin: 2px;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>Employee List</h1>
<table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
</tbody>
</table>
<div class="pagination" id="pagination">
<!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
</div>
<script>
// বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
let currentPage = 1;
const rowsPerPage = 10;
// পেজ লোড হলে ডেটা লোড করা
document.addEventListener('DOMContentLoaded', function() {
fetchData(currentPage);
});
// Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
function fetchData(page) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
renderTable(response.data);
renderPagination(response.totalPages, page);
}
};
xhr.send();
}
// টেবিল রেন্ডার করার ফাংশন
function renderTable(data) {
var tbody = document.querySelector("#employee-table tbody");
tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা
data.forEach(function(employee) {
var row = document.createElement("tr");
row.innerHTML = `<td>${employee.name}</td>
<td>${employee.email}</td>
<td>${employee.department}</td>`;
tbody.appendChild(row);
});
}
// পেজিনেশন রেন্ডার করার ফাংশন
function renderPagination(totalPages, currentPage) {
var pagination = document.getElementById('pagination');
pagination.innerHTML = "";
for (let i = 1; i <= totalPages; i++) {
var button = document.createElement("button");
button.textContent = i;
if (i === currentPage) {
button.disabled = true;
}
button.onclick = function() {
fetchData(i);
};
pagination.appendChild(button);
}
}
</script>
</body>
</html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";
$conn = new mysqli($servername, $username, $password, $dbname);
// কানেকশন চেক করা
if ($conn->connect_error) {
http_response_code(500);
echo json_encode(["error" => "Database connection failed."]);
exit();
}
// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;
// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);
// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();
// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
"data" => $employees,
"totalPages" => $totalPages
]);
$stmt->close();
$conn->close();
?>
ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:
CREATE TABLE employees (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
department VARCHAR(100) NOT NULL
);
HTML এবং JavaScript:
fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।renderTable() ফাংশন Ajax থেকে প্রাপ্ত ডেটা ব্যবহার করে টেবিল আপডেট করে।renderPagination() ফাংশন ডায়নামিক্যালি পেজিনেশন বাটন তৈরি করে।PHP স্ক্রিপ্ট:
Ajax এবং PHP ব্যবহার করে Server Side Pagination তৈরি করা একটি কার্যকর পদ্ধতি, যা ডাটাবেসে বড় ডেটাসেটের সাথে কাজ করার সময় খুবই গুরুত্বপূর্ণ। Server Side Pagination ডাটাবেস থেকে প্রতিবার শুধুমাত্র নির্দিষ্ট পরিমাণে ডেটা ফেচ করে, যা সার্ভার এবং ক্লায়েন্ট উভয়ের পারফরম্যান্স উন্নত করে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Side Pagination Example</title>
<style>
/* Pagination styling */
.pagination {
margin-top: 20px;
}
.pagination button {
margin: 2px;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>Employee List</h1>
<table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
</tbody>
</table>
<div class="pagination" id="pagination">
<!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
</div>
<script>
// বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
let currentPage = 1;
const rowsPerPage = 10;
// পেজ লোড হলে ডেটা লোড করা
document.addEventListener('DOMContentLoaded', function() {
fetchData(currentPage);
});
// Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
function fetchData(page) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
renderTable(response.data);
renderPagination(response.totalPages, page);
}
};
xhr.send();
}
// টেবিল রেন্ডার করার ফাংশন
function renderTable(data) {
var tbody = document.querySelector("#employee-table tbody");
tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা
data.forEach(function(employee) {
var row = document.createElement("tr");
row.innerHTML = `<td>${employee.name}</td>
<td>${employee.email}</td>
<td>${employee.department}</td>`;
tbody.appendChild(row);
});
}
// পেজিনেশন রেন্ডার করার ফাংশন
function renderPagination(totalPages, currentPage) {
var pagination = document.getElementById('pagination');
pagination.innerHTML = "";
for (let i = 1; i <= totalPages; i++) {
var button = document.createElement("button");
button.textContent = i;
if (i === currentPage) {
button.disabled = true;
}
button.onclick = function() {
fetchData(i);
};
pagination.appendChild(button);
}
}
</script>
</body>
</html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";
// ডাটাবেস কানেকশন সেটআপ
$conn = new mysqli($servername, $username, $password, $dbname);
// কানেকশন চেক করা
if ($conn->connect_error) {
http_response_code(500);
echo json_encode(["error" => "Database connection failed."]);
exit();
}
// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;
// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);
// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();
// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
"data" => $employees,
"totalPages" => $totalPages
]);
$stmt->close();
$conn->close();
?>
ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:
CREATE TABLE employees (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
department VARCHAR(100) NOT NULL
);
fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।renderTable() এবং renderPagination() ফাংশন কল হয়, যা টেবিল আপডেট করে এবং Pagination বাটন তৈরি করে।Dynamic Pagination এমন একটি পদ্ধতি যেখানে ডেটা পেজ রিফ্রেশ ছাড়াই Ajax রিকোয়েস্টের মাধ্যমে ডায়নামিক্যালি লোড এবং আপডেট করা হয়। এটি ওয়েব অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ইন্টারেক্টিভ করে তোলে, বিশেষ করে যখন বড় ডাটাসেটের সাথে কাজ করতে হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Pagination Example</title>
<style>
/* Pagination styling */
.pagination {
margin-top: 20px;
}
.pagination button {
margin: 2px;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>Employee List</h1>
<table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
</tbody>
</table>
<div class="pagination" id="pagination">
<!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
</div>
<script>
// বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
let currentPage = 1;
const rowsPerPage = 10;
// পেজ লোড হলে ডেটা লোড করা
document.addEventListener('DOMContentLoaded', function() {
fetchData(currentPage);
});
// Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
function fetchData(page) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
renderTable(response.data);
renderPagination(response.totalPages, page);
}
};
xhr.send();
}
// টেবিল রেন্ডার করার ফাংশন
function renderTable(data) {
var tbody = document.querySelector("#employee-table tbody");
tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা
data.forEach(function(employee) {
var row = document.createElement("tr");
row.innerHTML = `<td>${employee.name}</td>
<td>${employee.email}</td>
<td>${employee.department}</td>`;
tbody.appendChild(row);
});
}
// পেজিনেশন রেন্ডার করার ফাংশন
function renderPagination(totalPages, currentPage) {
var pagination = document.getElementById('pagination');
pagination.innerHTML = "";
for (let i = 1; i <= totalPages; i++) {
var button = document.createElement("button");
button.textContent = i;
if (i === currentPage) {
button.disabled = true;
}
button.onclick = function() {
fetchData(i);
};
pagination.appendChild(button);
}
}
</script>
</body>
</html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";
$conn = new mysqli($servername, $username, $password, $dbname);
// কানেকশন চেক করা
if ($conn->connect_error) {
http_response_code(500);
echo json_encode(["error" => "Database connection failed."]);
exit();
}
// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;
// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);
// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();
// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
"data" => $employees,
"totalPages" => $totalPages
]);
$stmt->close();
$conn->close();
?>
ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:
CREATE TABLE employees (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
department VARCHAR(100) NOT NULL
);
HTML এবং JavaScript:
fetchData() ফাংশন কল হয়, যা Ajax রিকোয়েস্ট পাঠায়।renderTable() এবং renderPagination() ফাংশন কল হয়। এই ফাংশনগুলো টেবিল আপডেট করে এবং Pagination বাটন তৈরি করে।PHP স্ক্রিপ্ট:
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
